<template>
	<view class="content">
		<view class="order-state">
			{{data.status | status}}
			<span>{{data.remark}}</span>
		</view>
		<view class="address">
			<icon class="icon-add"></icon>
			<view class="add">
				<h2>{{data.userName}}<span>{{data.userMobile}}</span></h2>
				<text>{{data.userAddress}}</text>
			</view>
		</view>
		<view class="goods">
			<dl v-for="(item,index) in data.orderItemList" :key="index">
				<dt><image :src="item.imgUrl"></image></dt>
				<dd>
					<h2>{{item.pName}}</h2>
					<span>{{item.userIntended}}</span>
					<em>x{{item.num}}</em>
				</dd>
			</dl>
		</view>
		<view class="time">
			<span>订单编号：{{data.orderId}}</span>
			<span>创建时间：{{data.createTime}}</span>
		</view>
		<!-- <view class="fixed">
			<span>删除订单</span>
		</view> -->
	</view>
</template>

<script>
	export default {
		filters:{
			// 0 表示审核中， 1表示已受理，2受理完成
			status(val) {
				let text = ''
				switch (val) {
					case 0:
				  text = '审核中'
				  break
					case 1:
						text = '已受理'
						break
					case 2:
						text = '受理完成'
						break
				}
				return text
			}
		},
		data() {
			return {
				orderId:'',
				data:{}
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
			this.query()
		},
		methods: {
			query(){
				this.$api({
					url: `/order/detail/${this.orderId}`,
					method: "GET",
				}).then(res => {
					this.data = res.data
				})
			},
			navigateto(url) {
				wx.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.content {
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
	}
	
	.order-state {
		padding: 30rpx;
		font-size: 32rpx;
		background: #dc261b;
		font-weight: bold;
		color: #fff;
		span {
			display: block;
			font-size: 28rpx;
			font-weight: normal;
			margin: 10rpx 0 0;
		}
	}
	
	.address {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 16rpx;
		margin: 20rpx;
		padding: 30rpx;
		icon {
			display: flex;
			font-size: 40rpx;
			color: #666;
		}
		.add {
			font-size: 28rpx;
			margin-left: 24rpx;
			h2 {
				display: flex;
				margin-bottom: 10rpx;
				span {
					color: #999;
					margin-left: 30rpx;
				}
			}
		}
	}
	
	.goods {
		margin: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		dl {
			display: flex;
			align-items: center;
			padding: 30rpx;
			dt {
				width: 152rpx;
				image {
					width: 152rpx;
					height: 152rpx;
				}
			}
			dd {
				flex: 1;
				position: relative;
				padding-left: 24rpx;
				h2 {
					height: 80rpx;
					font-size: 28rpx;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				span, em {
					display: block;
					font-size: 24rpx;
					margin: 10rpx 0 0;
					color: #999;
				}
				em {
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}
		}
		
	}
	.time {
		padding: 30rpx;
		margin: 20rpx 20rpx 0;
		background: #fff;
		border-radius: 16rpx;
		span {
			display: block;
			font-size: 28rpx;
			margin: 10rpx 0 0;
			color: #999;
			&:first-of-type {
				margin: 0;
			}
		}
	}
	
	.fixed {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: initial;
		padding-bottom: calc(env(safe-area-inset-bottom));
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		span {
			width: 168rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			color: #999;
			border: 2rpx solid #d8d8d8;
			border-radius: 50rpx;
			font-size: 28rpx;
			margin-right: 30rpx;
		}
	}
	
</style>
